import React, { Component } from 'react';
import ReactUeditor from 'ifanrx-react-ueditor';
import { Modal } from 'antd';
import { formatMessage } from 'umi-plugin-react/locale';
import BtnPlugin from '@/pages/KnowledgeManagement/Overview/EditingKnowledge/btnPlugin';

class Editor extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    if (this.ueditorRef) {
      this.ueditorRef.destroy();
    }
  }

  componentWillUnmount() {
    if (this.ueditorRef) {
      const { key } = this.ueditorRef
      const ref = this.ueditorRef;
      if (ref) {
        ref.destroy();
        window.UE.delEditor(key);
        const child = document.getElementById(key);
        if (child) {
          child.parentNode.removeChild(child);
        }
      }
    }
  }

  // 初始化ueditior 对象
  getUeditor = ref => {
    this.ueditorRef = ref;
  };

  // 获取内容
  getUeditorContent = ref => {
    return this.ueditorRef.getContent();
  };

  // 初始化设置高度
  handleReady = () => {
    // 初始值253
    this.ueditorRef.setHeight(Number(this.props.height));
    if (this.props.zIndex) {
      this.ueditorRef.container.style.zIndex = this.props.zIndex;
    }
  };

  render() {
    const { content, toJson } = this.props;
    const btnPlugin = ueditor => {
      return {
        menuText: 'json类型答案',
        cssRules:
          'background: url('+staticPath+'/json-edit.png) !important; background-size: 20px 20px !important',
        render: (visible, closeModal) => {
          /* 直接根据visible判断 会报render警告 故使用组件方式实现 */
          const doJsonBtn = () => {
            closeModal()
            toJson();
          }
          return <BtnPlugin visible={visible} doJsonBtn={doJsonBtn} />;
        },
      };
    };

    // 多语言配置
    const labelMap = {
      'undo': formatMessage({ id: 'account.robotSetup.welcome.editorUndo' }),
      'redo': formatMessage({ id: 'account.robotSetup.welcome.editorRedo' }),
      'bold': formatMessage({ id: 'account.robotSetup.welcome.editorBold' }),
      'italic': formatMessage({ id: 'account.robotSetup.welcome.editorItalic' }),
      'underline': formatMessage({ id: 'account.robotSetup.welcome.editorUnderline' }),
      'strikethrough': formatMessage({ id: 'account.robotSetup.welcome.editorStrikethrough' }),
      'forecolor': formatMessage({ id: 'account.robotSetup.welcome.editorForeColor' }),
      'backcolor': formatMessage({ id: 'account.robotSetup.welcome.editorBackColor' }),
      'justifyleft': formatMessage({ id: 'account.robotSetup.welcome.editorJustifyLeft' }),
      'justifycenter': formatMessage({ id: 'account.robotSetup.welcome.editorJustifyCenter' }),
      'justifyright': formatMessage({ id: 'account.robotSetup.welcome.editorJustifyRight' }),
      'justifyjustify': formatMessage({ id: 'account.robotSetup.welcome.editorJustifyJustify' }),
      'link': formatMessage({ id: 'account.robotSetup.welcome.editorInsertLink' }),
      'imagenone': formatMessage({ id: 'account.robotSetup.welcome.editorInsertImage' }),
      'imageleft': formatMessage({ id: 'account.robotSetup.welcome.editorInsertImage' }),
      'imageright': formatMessage({ id: 'account.robotSetup.welcome.editorInsertImage' }),
      'imagecenter': formatMessage({ id: 'account.robotSetup.welcome.editorInsertImage' }),
      'insertimage': formatMessage({ id: 'account.robotSetup.welcome.editorInsertImage' }),
      'insertvideo': formatMessage({ id: 'account.robotSetup.welcome.editorInsertVideo' }),
      'attachment': formatMessage({ id: 'account.robotSetup.welcome.editorInsertAttachment' }),
      'inserttable': formatMessage({ id: 'account.robotSetup.welcome.editorInsertTable' }),
      'paragraph': formatMessage({ id: 'account.robotSetup.welcome.editorParagraph' }),
      'fontfamily': formatMessage({ id: 'account.robotSetup.welcome.editorFontFamily' }),
      'fontsize': formatMessage({ id: 'account.robotSetup.welcome.editorFontSize' }),
    };

    // 段落和标题多语言配置
    const paragraphMap = {
      'p': formatMessage({ id: 'account.robotSetup.welcome.editorParagraphText' }),
      'h1': formatMessage({ id: 'account.robotSetup.welcome.editorHeading1' }),
      'h2': formatMessage({ id: 'account.robotSetup.welcome.editorHeading2' }),
      'h3': formatMessage({ id: 'account.robotSetup.welcome.editorHeading3' }),
      'h4': formatMessage({ id: 'account.robotSetup.welcome.editorHeading4' }),
      'h5': formatMessage({ id: 'account.robotSetup.welcome.editorHeading5' }),
      'h6': formatMessage({ id: 'account.robotSetup.welcome.editorHeading6' }),
    };

    return (
      <ReactUeditor
        value={content}
        ueditorPath={staticPath + "/ueditor"}
        getRef={this.getUeditor}
        onReady={this.handleReady}
        plugins={toJson ? [btnPlugin] : []}
        config={{
          labelMap: labelMap,
          paragraph: paragraphMap,
          placeholder: formatMessage({ id: 'account.robotSetup.welcome.editorTip' })
        }}
      />
    );
  }
}
export default Editor;
